import mapboxgl, { Map } from 'mapbox-gl'

mapboxgl.accessToken =
  'pk.eyJ1IjoibHpjY3MiLCJhIjoiY2xvemlmOGJzMDB2bTJxbXIxeTlvemlzcSJ9.Asvw-xMAcHVDgfP6uxMRHQ'

/**
 * 初始化地图
 */
const initMap = () => {
  const map = new Map({
    container: 'map', //容器id
    interactive: true, // 地图是否可交互
    // center: [138.7189, 35.1691],
    // zoom: 11.53, //缩放级别
    // pitch: 76, //倾斜角度
    // bearing: -177.2, //旋转角度
    projection: 'globe', // 将地图显示为地球仪，因为satellite-v9默认为墨卡托
    // minZoom: 9,// 最小缩放级别
    // maxZoom: 19,// 最大缩放级别
    // 从mapbox的核心样式中选择，或者使用mapbox studio制作自己的样式
    // style: 'mapbox://styles/mapbox/satellite-v9',
    style: 'mapbox://styles/mapbox/satellite-streets-v12',
    center: [-94.51, 38.52], // 起始点是美国
    zoom: 1,
    pitch: 0,
    bearing: 0,
  })

  // 地图样式加载完成但是还没有开始渲染的生命周期
  map.on('style.load', () => {
    // 自定义氛围造型
    map.setFog({
      color: '#fff', // 粉红色雾/低层大气
      'high-color': 'rgb(36, 92, 223)', // 蓝天/上层大气
      'horizon-blend': 0.4, // 渲染气氛（默认为0.1）
    })
    // 添加地形
    map.addSource('mapbox-dem', {
      type: 'raster-dem',
      url: 'mapbox://mapbox.terrain-rgb',
    })
    // 向地图中添加图层
    map.setTerrain({
      source: 'mapbox-dem',
      exaggeration: 1.5,
    })
  })

  return new Promise<any>((resolve, reject) => {
    map.on('load', () => {
      // 监听点击事件获取经纬度
      map.on('click', (e) => {
        const coordinates = e.lngLat
        const longitude = coordinates.lng
        const latitude = coordinates.lat
        // 输出经纬度
        console.log('经度: ' + longitude + ', 纬度: ' + latitude)
      })
      resolve(map)
    })
  }) // 设置默认的氛围样式
}
export default initMap
